<template>
  <!-- 筛选区 -->
  <div class="sub-filter">
    <!-- 品牌 -->
    <div class="item">
      <div class="head">品牌：</div>
      <div class="body">
        <!-- <a href="javascript:;">{{i.name}}</a> -->
        <a
          :class="{ active: i.selected }"
          href="javascript:;"
          @click="serBrabd(i)"
          v-for="i in subCates.brands"
          :key="i.id"
        >
          {{ i.name }}
        </a>
      </div>
    </div>
    <!-- 规格 -->
    <div class="item" v-for="item in subCates.saleProperties" :key="item.id">
      <div class="head">{{ item.name }}：</div>
      <div class="body">
        <!-- <a href="javascript:;">全部</a> -->
        <a
          :class="{ active: k.selected }"
          href="javascript:;"
          @click="setProperty(k, item)"
          v-for="k in item.properties"
          :key="k.id"
        >
          {{ k.name }}
        </a>
      </div>
    </div>
  </div>
</template>

<script>
import { inject } from 'vue'
export default {
  setup () {
    const subCates = inject('subCates')
    // 接受sub过滤传来值 目的
    const filterParams = inject('filterParams')
    /**
     * 1.清楚之前的搞亮 => foreach()
     * 2.已经高亮的 =>再次点击retrun
     */
    // 点击品牌搞亮
    const serBrabd = (brand) => {
      // 如果选过就返回
      if (brand.selected) return
      // 存储选中的品牌id
      filterParams.value.brandId = brand.id
      // 清楚之前选中的搞亮
      subCates.value.brands.forEach(element => {
        element.selected = false
      })
      // 让选中的变量搞亮
      brand.selected = true
    }
    // 点击规格属性搞亮
    const setProperty = (prop, props) => {
      if (prop.selected) return
      console.log(prop, props)
      // 需求 : 存储规格下选中的属性数据
      // 判断filterParams.value.attrs是否有选中的数据
      const index = filterParams.value.attrs.findIndex(per => per.groupName === props.name)
      if (index > -1) {
        filterParams.value.attrs.splice(index, 1)
      }
      // 判断点击的是不是全部
      if (prop.id !== null) {
        filterParams.value.attrs.push({
          groupName: props.name,
          propertyName: prop.name
        })
      }
      // 高亮前清楚之前的状态
      props.properties.forEach(item => {
        item.selected = false
      })
      // 点击谁让谁高亮
      prop.selected = true
    }
    return { subCates, serBrabd, setProperty }
  }
}
</script>
<style scoped lang='less'>
// 筛选区
.sub-filter {
  background: #fff;
  padding: 25px;
  .item {
    display: flex;
    padding: 10px 0;
    .head {
      width: 80px;
      color: #999;
    }
    .body {
      flex: 1;
      a {
        display: inline-block;
        margin-right: 36px;
        margin-bottom: 20px;
        transition: all 0.3s;
        border: 1px solid #eee;
        padding: 6px;
        &.active,
        &:hover {
          color: @xtxColor;
          border-color: @xtxColor;
        }
      }
    }
  }
}
</style>
